<template>
  <view>
    <userinfo />

    <grids />

    <view class="f-center">
      <image src="../../static/images/mine/title.png" style="width: 370rpx;height: 34rpx;" mode="widthFix"></image>
    </view>
    <view class="u-p-25 cards">
      <view class="card">
        <image class="pic" src="https://picsum.photos/id/884/300/300" mode=""></image>
        <view class="u-p-16">
          <view class="title u-line-2">Paul Frank 女款拼接阔腿牛仔裤</view>
          <view class="price u-line-1">¥373</view>
        </view>
      </view>
      <view class="card">
        <image class="pic" src="https://picsum.photos/id/884/300/300" mode=""></image>
        <view class="u-p-16">
          <view class="title u-line-2">Paul Frank 女款拼接阔腿牛仔裤</view>
          <view class="price u-line-1">¥373</view>
        </view>
      </view>
      <view class="card">
        <image class="pic" src="https://picsum.photos/id/884/300/300" mode=""></image>
        <view class="u-p-16">
          <view class="title u-line-2">Paul Frank 女款拼接阔腿牛仔裤</view>
          <view class="price u-line-1">¥373</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import userinfo from './components/userinfo.vue'
  import grids from './components/grids.vue'
  export default {
    components: {
      userinfo,
      grids
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .cards {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .card {
    margin-bottom: 25rpx;
    width: 340rpx;
    background: #fff;
    border-radius: 8rpx;
    overflow: hidden;

    .pic {
      width: 340rpx;
      height: 340rpx;
      object-fit: cover;
    }

    .title {
      height: 80rpx;
      font-size: 24rpx;
      line-height: 36rpx;
    }

    .price {
      font-size: 32rpx;
      line-height: 36rpx;
      font-weight: bold;
    }
  }
</style>
